<script src="/aifish/common/check.pjax.js"></script>
<article>
    <div class="toc-affix" style="">
        <div class="" style="">
            <ul class="toc demos-anchor">
                <li><a href="#src-components-Layout-demo-basic">基本</a></li>
                <li><a href="#src-components-Layout-demo-admin">管理中心</a></li>
            </ul>
        </div>
    </div>
    <section class="markdown">
        <h1>Layout 布局</h1>
        <section class="markdown">
            <!-- <h2 id="何时使用"><span>何时使用</span><a href="#何时使用" class="anchor">#</a></h2> -->
            <p>使用了Bootstrap 提供的一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
            </p>
        </section>
        <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
    </section>
    <div class="ant-row" style="margin-left: -8px; margin-right: -8px;">
        <div class="ant-col-24 code-boxes-col-1-1" style="padding-left: 8px; padding-right: 8px;">
            <section class="code-box" id="src-components-Layout-demo-basic">
                <section id="J_vue_qseytwyoygp" class="code-box-demo">
                    <div class="row">
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                          <div class="col-md-1">.col-md-1</div>
                    </div>
                    <div class="row">
                          <div class="col-md-8">.col-md-8</div>
                          <div class="col-md-4">.col-md-4</div>
                    </div>
                    <div class="row">
                          <div class="col-md-4">.col-md-4</div>
                          <div class="col-md-4">.col-md-4</div>
                          <div class="col-md-4">.col-md-4</div>
                    </div>
                    <div class="row">
                          <div class="col-md-6">.col-md-6</div>
                          <div class="col-md-6">.col-md-6</div>
                    </div>
                </section>
                <section class="code-box-meta markdown">
                    <div class="code-box-title"><a href="#src-components-Layout-demo-basic">基本</a></div>
                    <div>
                        <p>展示了所有栅格布局样例</p>
                    </div>
                    <span class="collapse anticon anticon-circle-o-right" unselectable="none"></span>
                </section>
                <section class="highlight-wrapper highlight-wrapper-expand">
                    <div class="highlight">
                        <pre class="language-xml">
<code >&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
    &lt;div class=&quot;col-md-1&quot;&gt;.col-md-1&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-8&quot;&gt;.col-md-8&lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;.col-md-4&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;.col-md-4&lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;.col-md-4&lt;/div&gt;
    &lt;div class=&quot;col-md-4&quot;&gt;.col-md-4&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;.col-md-6&lt;/div&gt;
    &lt;div class=&quot;col-md-6&quot;&gt;.col-md-6&lt;/div&gt;
&lt;/div&gt;</code></pre>
                    </div>
                </section>
            </section>
        </div>
    </div>
    <style type="text/css">
    #src-components-Layout-demo-basic .row > div {
       text-align: center;
        line-height: 30px;
        height: 30px;
        background: #99EAD8;
        margin-bottom: 10px;
        font-size: 12px;
        background-clip: content-box;
    }
  </style>
</article>